<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>嵌套路由</title>
  <style>
    body{
      margin: 0;
    }
    .layout{
      /* 视图高度 */
      width: 100vh;
      /* background: pink; */
      /* 使用如下布局 */
      display: flex;
      overflow: hidden;
    }
    .nav{
      width: 200px;
      background-color: pink;
    }
    .container{
      background: green;
      flex: auto;
    }
  </style>
</head>

<body>
  <div id="root">
    <div class="layout">
      <div class="nav">
        <h1>导航菜单</h1>
        <ul>
          <li><router-link to="/login">登录组件</router-link></li>
          <li><router-link to="/register">注册组件</router-link></li>
        </ul>

      </div>
      <div class="container">
        <router-view></router-view>
      </div>
    </div>
  </div>


  <script src="../js/vue.js"></script>
  <script src="../js/vue-router.js"></script>
  <script>
    let Login = {
      template: `<h1>登录组件</h1>`
    }
    let Register = {
      template: `<h1>注册组件</h1>`
    }
    let routes = [
      {
        path:'/login',
        component:Login
      },
      {
        path:'/register',
        component:Register
      }
    ]
    let router = new VueRouter({
      routes
    })
    let vm = new Vue({
      el: '#root',
      data: {

      },
      router
    })
  </script>
</body>

</html>